<template>
  <div style="width: 100%">
    <div v-for="(v, k) in list" :key="k" class="main-body">
      <template v-for="i in 5" :key="i">
        <vab-link v-if="v[i - 1]" class="icon-panel" :to="v[i - 1].path">
          <vab-card shadow="hover">
            <vab-icon
              :icon="v[i - 1].icon"
              :style="{ color: v[i - 1].color }"
            />
            <p>{{ v[i - 1].title }}</p>
          </vab-card>
        </vab-link>
        <div v-else class="icon-panel" style="cursor: auto"></div>
      </template>
    </div>
  </div>
</template>

<script>
  import { getList } from '@/api/router'

  import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    reactive,
    toRefs,
  } from 'vue'

  export default defineComponent({
    setup() {
      const { proxy } = getCurrentInstance()
      const state = reactive({
        list: [],
      })
      // 卡片图标
      const iconList = []

      const changeTheme = () => {
        proxy.$pub('theme')
      }
      const handleMore = () => {
        proxy.$baseAlert('敬请期待！')
      }
      const randomTheme = () => {
        proxy.$pub('random-theme')
      }

      const fetchData = async () => {
        const {
          data: { list },
        } = await getList()

        list.forEach((item) => {
          item.children.forEach((it) => {
            if (
              it.path != '/index' &&
              it.path != '/employmentRecord/manage'
              // && !it.path.endsWith('detail')
            ) {
              let obj = {
                path: it.path,
                title: it.title,
                icon: it.icon,
                id: it.id,
                pid: it.pid,
                hidden: it.meta.hidden,
                color: `rgb(${Math.floor(Math.random() * 256)},${Math.floor(
                  Math.random() * 256
                )},${Math.floor(Math.random() * 256)})`,
              }
              if (!obj.hidden) {
                state.list.push(obj)
              }
            }
          })
        })
        let arr = []
        let arrSon = []
        let index = 0
        state.list.forEach((item) => {
          arrSon.push(item)
          if (++index % 6 == 0) {
            arr.push(arrSon)
            arrSon = []
          }
        })
        if (arrSon != []) {
          arr.push(arrSon)
        }
        state.list = arr
      }

      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        fetchData,
        iconList,
        changeTheme,
        handleMore,
        randomTheme,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .main-body {
    display: flex;
    width: 100%;
    padding: 0 5px;
  }
  .icon-panel {
    flex: 1;
    margin: 0 5px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
    height: 150px;
    .el-card__body {
      height: 120px;

      &:hover {
        i {
          transform: scale(1.15);
        }
      }

      i {
        display: block;
        width: 50px;
        height: 50px;
        margin: auto;
        font-size: 40px;
        transition: all ease-in-out 0.3s;
      }

      p {
        margin-top: 10px;
        text-align: center;
      }
    }
  }
</style>
